<template>
    <Layout>
        <Form ref="queryForm" :model="dataToQuery" :label-width="125" >
            <Row  class="query-form">
                <Col span="8">
                    <FormItem label="集团名称：" prop="companyId">
                        <Select class='w' placeholder="集团名称" :disabled="buttonShow" v-model='dataToQuery.companyId'>
                            <Option v-for="item in twoLevel" :value="item.orgId" :key="item.orgId">{{item.orgName}}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="年度：" prop="year" >
                        <DatePicker class="query-form-el" type="year" v-model="dataToQuery.year1" :clearable="false"
                                    @on-change="()=>{if(dataToQuery.year1 instanceof Date){dataToQuery.year = dataToQuery.year1.getFullYear().toString()}}"></DatePicker>
                    </FormItem>
                </Col>
                <Col span="8">
                    <!--<Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>-->
                    <Button @click="reset1" class="ivu-btn-reset">重置</Button>
                    <Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                </Col>
            </Row>
            <Row :gutter="24">
                <Col span="12">
                    <Card dis-hover>
                        <div ref="echart1" :style="{height: '300px'}"></div>
                    </Card>
                </Col>
                <Col span="12">
                    <Card dis-hover>
                        <div ref="echart2" :style="{height: '300px'}"></div>
                    </Card>
                </Col>
            </Row>
            <Row class="query-form" style="margin-top: 10px">
                <Col span="24" style='height:40px;'>
                    <div>
                        <Button type="primary" class="ivu-btn-add" :loading="buttonLoading" icon="md-cloud-download"
                                @click="downloadFileTable(1)">验收结果汇总导出</Button>
                        <Button type="primary" class="ivu-btn-add" :loading="buttonLoading" icon="md-cloud-download"
                                @click="downloadFileTable(2)">验收问题分布导出</Button>
                        <Button type="primary" class="ivu-btn-add" :loading="buttonLoading" icon="md-cloud-download"
                               v-if='!buttonShow' @click="downloadFileTable(3)">集团验收结果</Button>
                    </div>
                </Col>
            </Row>
        </Form>
        <Table ref='table' :height="tableHeight" no-data-text="没有查询到相关数据!" @on-selection-change='getSelectRows'
               :loading='pageStatus.loading'
               border :columns="columns1" :data="dataTable">
        </Table>
        <Row style="margin-right:10px;">
            <Col span="24">
                <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize"
                      @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray"
                      show-total show-sizer show-elevator/>
            </Col>
        </Row>


    </Layout>
</template>

<script>
    import echarts from "echarts";
    import {Api} from '@/api/index.js'
    import {sessionStorage, cookie} from '@/common/cacheUtils.js';
    import pageCommonFunction from '@/components/pageCommonFunction.js'
    export default {
        data() {
            return {
                ...this.createCommonDataField(),
                columns1: [
                    {title: '序号', width: 80, fixed: 'left', align: 'center', render: this.indexColumnsRenderSum},
                    {key: 'belongOrgName', title: '二级集团', fixed: 'left', align: 'center', minWidth: 200},
                    {key: 'companyName', title: '被验收企业', align: 'center', minWidth: 200},
                    {key: 'levelTime', title: '验收时间', align: 'center', minWidth: 100,
                        render: (h,params)=>{return h('span',this.renderViewDate(params.row.levelTime))},
                    },
                    {key: 'auditor', title: '验收人员', align: 'center', minWidth: 100},
                    {key: 'problemNum', title: '问题数量', align: 'center', minWidth: 100},
                    {key: 'integretedScore', title: '验收分数', align: 'center', minWidth: 100},
                    {key: 'levelName', title: '验收等级', align: 'center', minWidth: 100},
                ],
                tableHeight: 10,
                // api
                queryUrl: Api.queryEnvAggregate,
                twoLevel:[],
                buttonLoading:false,
				buttonShow:false,
            }
        },
        mounted() {
            this.tableHeight = 400
            this.dataToQuery.year1 = new Date()
            this.dataToQuery.year = new Date().getFullYear().toString()
            this.query();
            this.$http.get(Api.quqeryTwoOrgInfo).then(res => {
                this.twoLevel=res.data.data
            })
        },
        methods: {
            ...pageCommonFunction,
            query() {
				this.buttonShow = false
				if (this.Common.belongOrgId.includes(this.currentUser.twoLevelOrgId)) {
					this.dataToQuery.companyId = this.currentUser.twoLevelOrgId
					this.buttonShow = true
				} 
                let container1 = echarts.init(this.$refs.echart1);
                let container2 = echarts.init(this.$refs.echart2);
                this.pageStatus.loading = true
                let data = {
                    startPage: this.pagedata.currentPage,
                    size: this.pagedata.pageSize,
                    conditions: this.dataToQuery
                };

                this.$http.post(this.queryUrl, data).then((res) => {
                    if (res.data.status === 201) {
                        this.$Message.error(res.data.msg);
                    }
                    this.dataTable = res.data.data.data;
                    this.pagedata.total = res.data.data.totalSize;
                    let dataMap = res.data.data.dataMap;

                    let option1 = this.getOption(dataMap.twoLevel,dataMap.twoLevelNum);
                    container1.setOption(option1);
                    window.onresize = container1.resize;

                    let option2 = this.getOption1(dataMap.pieList);
                    container2.setOption(option2);
                    window.onresize = container2.resize;

                    this.pageStatus.loading = false
                }).catch(e => {
                    this.$Message.error("数据获取失败")
                    this.pageStatus.loading = false
                })
            },
            reset1() {
                this.dataToQuery = {
                    year1: new Date(),
                    year : new Date().getFullYear().toString()
                };
                this.pagedata.currentPage=1
                this.query()
            },

            getOption(xAxis,series1) {
                return {
                    title: {
                        text: "环境标准化验收统计",
                        textStyle: {
                            fontSize: 14,
                        },
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    // legend: {
                    //     data:legendData,
                    //     bottom:1,
                    // },
                    grid: {
                        left: '3%',
                        right: '3%',
                        bottom: '1%',
                        containLabel: true,
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: xAxis,
                            axisLabel: {
                                // show: true,
                                interval: 0,
                                rotate: 25,
                                fontSize: 12,
                            },
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            min: 0,
                            minInterval:1,
                        }
                    ],
                    color: ['#42A5F5'],
                    series: [
                        {
                            name: "验收数量",
                            type: 'bar',
                            // barWidth : 30,
                            // barGap: "1%",
                            label: {
                                show: true,
                            },
                            itemStyle: {
                                barBorderRadius: [4, 4, 0, 0],
                            },
                            data: series1,
                        },
                    ]
                }
            },

            getOption1(data){
                let option = {
                    title: {
                        text: '验收等级分布',
                        textStyle: {
                            fontSize: 14
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        // orient: 'vertical',
                        bottom: 1,
                    },
                    color:['#42A5F5', '#FF3E80', '#FFC310', '#1DE9B6'],
                    series: [
                        {
                            name: '验收等级',
                            type: 'pie',
                            radius: '60%',
                            center: ['40%', '50%'],
                            label: {
                                formatter: '{@2012} ({d}%)'
                            },
                            data: data,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                return option;
            },

            downloadFileTable(type) {
                if (!this.dataToQuery.companyId && type!==3) {
                    this.$Message.warning("请先选择集团名称在导出");
                } else {
					this.downloadTable({
					     formData: this.dataToQuery,
					     action: Api.queryEnvAggregate+'/download/'+type+'/'+this.dataToQuery.year,
					 })
                    // let token = sessionStorage('token').get('Authorization');
                    // let dlform = document.createElement('form')
                    // dlform.style = 'display:none;'
                    // dlform.method = "get"
                    // dlform.action = Api.queryEnvAggregate+'/download/'+type+'/'+this.dataToQuery.year
                    // dlform.target = '_blank'
                    // let hdnFilePath1 = document.createElement('input')
                    // hdnFilePath1.type = 'hidden'
                    // hdnFilePath1.name = 'companyId'
                    // hdnFilePath1.value = this.dataToQuery.companyId
                    // dlform.appendChild(hdnFilePath1)
                    // let hdnFilePath = document.createElement('input')
                    // hdnFilePath.type = 'hidden'
                    // hdnFilePath.name = 'token'
                    // hdnFilePath.value = token
                    // dlform.appendChild(hdnFilePath)
                    // document.body.appendChild(dlform)
                    // dlform.submit()
                    // document.body.removeChild(dlform)
                }
            },
        },
        computed: {},

    }
</script>

<style lang='css' scoped>
    @import '../../../../index.css';
</style>
